<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			id="0"
			:data-current="0"
			:class="{ 'active': active == 'all' }"
			@click="onTabClick('all')">
			<text class="tab-view-item--text">全部</text>
		</view>
		
		<view class="tab-view-item"
			id="1"
			:data-current="1"
			:class="{ 'active': active == 'live' }"
			@click="onTabClick('live')">
			<text class="tab-view-item--text">{{ module == 'school' ? '我的直播课程' : '直播课程' }}</text>
		</view>
		
		<block v-if="module == 'school'">
			<view class="tab-view-item"
				id="2"
				:data-current="2"
				:class="{ 'active': active == 'learning' }"
				@click="onTabClick('learning')">
				<text class="tab-view-item--text">在学课程</text>
			</view>
		</block>
		<block v-else>
			<view class="tab-view-item"
				id="2"
				:data-current="2"
				:class="{ 'active': active == 'hot' }"
				@click="onTabClick('hot')">
				<text class="tab-view-item--text">推荐课程</text>
			</view>
		</block>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 全部 -->
		<swiper-item class="swiper-item">
			<uni-list :border="false">
				<subject-card v-for="(item, index) in allList"
					:key="index + item.id"
					:item="item"
					@detail="() => onItemClick('subject', item)"
					@book="() => onBookClick('subject', item)">
				</subject-card>
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 直播课程 -->
		<swiper-item class="swiper-item">
			<uni-list :border="false">
				<subject-card v-for="item in courseList"
					:key="item.id"
					:item="item"
					@detail="() => onItemClick('subject', item)"
					@book="() => onBookClick('subject', item)">
				</subject-card>
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 推荐课程/在学课程 -->
		<swiper-item class="swiper-item">
			<uni-list :border="false">
				<subject-card v-for="item in learningList"
					:key="item.id"
					:item="item"
					@detail="() => onItemClick('subject', item)"
					@book="() => onBookClick('subject', item)">
				</subject-card>
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
import SubjectCard from '../tabbar/subject-card.vue';
import { getCourseSets, getMyLearning } from '@/api/index.js';
export default {
	components: {
		SubjectCard
	},
	data() {
		return {
			active: 'all',
			tabIndex: 0,
			module: null,
			type: null,
			from: null,
			school: ['all', 'live', 'learning'],
			union: ['all', 'live', 'hot'],
			allList: [],
			courseList: [],
			learningList: []
		}
	},
	onLoad(data) {
		this.module = data.module || 'union';
		this.type = data.type || 'all';
		this.from = data.from || 'index';
		this.onTabClick(this.type);
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		getCourseSets().then(res => {
			this.courseList = this.courseList.concat(res.list || []);
			this.allList = this.allList.concat(res.list || []);
		});
		getMyLearning().then(res => {
			this.learningList = this.learningList.concat(res.list || []);
			this.allList = this.allList.concat(res.list || []);
		});
	},
	methods: {
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'live':
					this.tabIndex = 1;
					break;
				case 'hot':
				case 'learning':
					this.tabIndex = 2;
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this[this.module][index];
		},
		onItemClick(type, item) {
			uni.navigateTo({
				url: `/pages/${ type }/detail?id=${ item.id }&from=subject`
			})
		},
		onBookClick(type, item) {
			console.log('on book click');
		}
	}
}
</script>
